<template>
	<view>
		<u-toast ref="uToast" />
		<view v-if="show">
			<view class="page">
				<view class="plateN" v-for="(item,i) in list" :key="i" @click="detItem(item)">
					<view class="" style="display: flex;">
						<view class="bg-purple" style="background-color: #fe8a85;">
							<img src="/static/jeesite/tabbar/che.png" class='bg-purple-i' alt="" srcset="">
						</view>
						<view class="bg-purple-light">
							<view class="" style="font-weight: bold;">
								{{item.reportPerson}} -- {{item.carId}}
							</view>
							<view class="" style="color: #ccc; font-size: 28rpx;">
								{{item.phone}}
							</view>
						</view>
					</view>
					<view class="plateN-r">
						<!-- <img src="/static/jeesite/tabbar/zuofei.png" class='bg-purple-ii3' mode=""  @click.stop="orderItem1(item.clueId)"> -->
						<img src="/static/jeesite/tabbar/genzong.png" class='bg-purple-ii3' mode=""  @click.stop="trackGo(item)">
						<img src="/static/jeesite/tabbar/chakan.png" class='bg-purple-ii2' mode=""  @click.stop="detailsItem(item.clueId)">
						<img src="/static/jeesite/tabbar/Rrl_s_138.png" class='bg-purple-ii' mode=""  >
					</view>
					
				</view>
			</view>
		</view>
		<view v-else>
			<u-empty mode="search"  icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
		<u-modal :show="show1" title="转工单" content='确定转工单吗?' @confirm="confirm1" @cancel="show1 = false" showCancelButton></u-modal>
		<u-modal :show="show2" title="转战败" content='确定转战败吗?' @confirm="confirm2" @cancel="show2 = false" showCancelButton></u-modal>
	</view>

</template>

<script>
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				current: '',
				current1:'',
				list: [],
				show: true,
				show1:false,
				show2:false

			}
		},
		onShow() {
			var that = this
			// that.list =[{
			// 	reportPerson:11
			// }]
			// return
			that.getListData()
			
			
		},
		onLoad() {
			var that = this
			// console.log(store.state.userList.companyCode)
			// that.list.forEach((i, it) => {
			// 	i.chack = false
			// 	if (i.cusId == store.state.userListName.cusId) {
			// 		i.chack = true
			// 		that.current = it
			// 	}
			// })
		},

		methods: {
			//点击
			detItem(e) {
				uni.navigateTo({
					url: '/pagesA/index/trackList?name=' +  JSON.stringify(e)
			
				})
			},
			trackGo(e){
				uni.navigateTo({
					url: '/pagesA/index/upload?name=' +  JSON.stringify(e)
							
				})
			},
			detailsItem(e){
				uni.navigateTo({
					url: '/pagesA/index/details?name=' + e
							
				})
			},
			orderItem(e){
				this.current = e
				this.show1 = true
				
			},
			orderItem1(e){
				this.current1 = e
				this.show2 = true
				
			},
			//转工单
			confirm1(e){
				var that = this
				that.$request('toBaseInfo', {
					clueId: that.current
				}, 'get').then(res2 => {
					if (res2.code == 200) {
						
						uni.$u.toast(`${res2.message}`)
						that.getListData()
						
					} else {
						that.$refs.uToast.error(`${res2.message}`)
					}
				
				})
			},
			getListData(){
				var that = this
				if(store.state.userListName.userCode){
					that.$request('getClueListByClueType', {
						// userCode: store.state.userListName.userCode , uni.getStorageSync('changeUser')
						userCode: store.state.userListName.userCode, 
						// userCode: '06273', 
						clueStatus: '待跟踪'
					}, 'get').then(res2 => {
						if (res2.code == 200) {
							that.list = res2.data
							// that.$refs.uToast.success(`${res2.message}`)
							uni.$u.toast(`${res2.message}`)
							if (res2.data.length == 0) {
								that.show = false
							}else{
								that.show = true
							}
						} else {
							that.$refs.uToast.error(`${res2.message}`)
						}
					
					})
				}else{
					that.$refs.uToast.error('信息丢失,请重新登录!')
					setTimeout(function() {
						uni.redirectTo({
							url: '/pages/sys/start/index'
						})
					}, 1000)
				}
			}
		},


	}
</script>

<style lang="scss" scoped>
	.bg-purple-ii {
		width: 50rpx;
		height: 50rpx;
		margin: 40rpx 10rpx 0 10rpx;

	}
	.bg-purple-ii2{
		width: 50rpx;
		height: 50rpx;
		margin: 40rpx 10rpx 0 10rpx;
		z-index: 10;

	}
	.bg-purple-ii3{
		width: 50rpx;
		height: 50rpx;
		margin: 40rpx 20rpx 0 10rpx;
		z-index: 10;
	
	}

	// .page {
	// 	// height: 100%;
	// 	padding: 20rpx 20rpx;
	// 	box-sizing: border-box;
	// 	position: relative;
	// }

	.plateN {
		height: 140rpx;
		line-height: 50rpx;
		box-shadow: 4px 4px 4px #f5f5f5;
		padding: 0 10rpx 0 0;
		box-sizing: border-box;
		margin-bottom: 50rpx;
		display: flex;
		justify-content: space-between;

		.bg-purple {

			width: 70rpx;
			height: 70rpx;
			background: #6e8ef0;
			border-radius: 4px;
			margin: 35rpx 0 0 35rpx;

			.bg-purple-i {
				width: 60%;
				height: 60%;
				margin-left: 50%;
				margin-top: 50%;
				transform: translate(-50%, -50%);
			}

		}

		.bg-purple-light {
			color: #6d6d6d;
			margin: 20rpx 0 0 30rpx;

		}

		.bg-purple-dark {
			width: 76rpx;
			height: 76rpx;

			.bg-purple-dark-i {
				width: 60%;
				height: 60%;
				margin-left: 50%;
				margin-top: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.plateN-r {}
</style>
